window.addEventListener('load', function() {
    //获取元素
    var small = this.document.querySelector('.small')
    var big = this.document.querySelector('.big')
    var mask = this.document.querySelector('.mask')
    var img = this.document.querySelector('.big>img')
        //鼠标移入small，显示big和mask
    small.addEventListener('mouseover', function() {
        big.style.display = 'block'
        mask.style.display = 'block'
    })

    //鼠标移入small，显示big和mask
    small.addEventListener('mouseout', function() {
        big.style.display = 'none'
        mask.style.display = 'none'
    })

    //鼠标在 small移动，获取鼠标在small的位置
    small.addEventListener('mousemove', function(e) {
        var smallX = e.pageX - small.offsetLeft
        var smallY = e.pageY - small.offsetTop
        var moveX = smallX - mask.offsetWidth / 2
        var moveY = smallY - mask.offsetHeight / 2
        var maxWidth = small.offsetWidth - mask.offsetWidth

        //限制mask的最小和最大移动范围
        if (moveX <= 0) {
            moveX = 0
        } else if (moveX >= maxWidth) {
            moveX = maxWidth
        }
        if (moveY <= 0) {
            moveY = 0
        } else if (moveY >= maxWidth) {
            moveY = maxWidth
        }
        mask.style.left = moveX + 'px'
        mask.style.top = moveY + 'px'

        //big 最大移动距离
        var bigMaxX = img.offsetWidth - big.offsetWidth
        var bigMaxY = img.offsetHeight - big.offsetHeight

        //求big相应的移动距离
        var bigMoveX = moveX * bigMaxX / maxWidth
        var bigMoveY = moveY * bigMaxY / maxWidth
        img.style.top = -bigMoveY + 'px'
        img.style.left = -bigMoveX + 'px'
    })


})